<template>
	<view>
		<!-- 头部显示 -->
		<view class="header">
			<span>{{form.name}}</span>
			<button size="mini" class="change_btn" @click="save">保 存</button>
		</view>
		<swiperTabHead :tabBars="tabList" :tabIndex="tabIndex" @tabtap="tabtap" class="swiper-header"></swiperTabHead>

		<!-- 水印设置 -->
		<view v-if="tabIndex == 0">
			<uni-forms ref="form" :modelValue="form" :rules="rules" label-width="180rpx" type="line" label-align="right"
				style="margin-top:40rpx;" class="paddingAll">
				<uni-forms-item label="水印名称" name="name">
					<uni-easyinput v-model="form.name" type="text" placeholder="请输入水印名称" :disabled="form.isSystem==1"/>
				</uni-forms-item>
				<uni-forms-item label="合同类型" name="contractTypeId">
					<uni-data-select v-model="form.contractTypeId" :localdata="contractArr" :clear="false" :placeholder="form.isSystem==1?'全部类型':'请选择合同类型'" :disabled="form.isSystem==1"/>
				</uni-forms-item>
				<uni-forms-item label="水印状态" name="status">
					<uni-data-checkbox v-model="form.status" :localdata="setArr" />
				</uni-forms-item>
			</uni-forms>
		</view>

		<!-- 添加水印 -->
		<add-watermaek v-if="tabIndex == 1" :dataform="form"></add-watermaek>
	</view>
</template>

<script>
	import { addWaterMark,getWaterMark,updateWaterMark } from "@/api/ec/console/busiConfig/waterMark";
	import swiperTabHead from "@/components/slideTab/slideTab";
	import addWatermaek from "./addWatermaek";
	import { listByCompanyId } from "@/api/ec/console/busiConfig/contractType";
	export default {
		components: { swiperTabHead,addWatermaek },
		data() {
			return {
				selectData: [], //选中的数据 包括员工和部门数据
				defaultDepart:[], //默认显示的水印使用人 
				defaultManage:[], //默认显示的水印管理员
				contractArr: [], //合同类型
				deptOptions: [],
				// 水印状态
				setArr: [{
						text: '启用',
						value: 1
					},
					{
						text: '停用',
						value: 0,
						disabled:false
					}
				],
				form: {
					status: 1,
					// 默认18
					qrCodeSize:18,
					// 默认右上角
					qrCodePosition:0,
					viewAuth: 0,
					departmentIds: [],
					contractNumberFontSize:14,
					contractNumberPosition:0,
					contractNumberAlpha:50,
					contractWaterMarkTxtImgList: [],       
				},
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: "请输入水印名称",
							trigger: "blur"
						}, ]
					},
					contractTypeId: {
						rules: [{
							required: true,
							errorMessage: "请选择合同类型",
							trigger: "blur"
						}, ]
					},
					status: {
						rules: [{
							required: true,
							errorMessage: "请选择水印状态",
							trigger: "blur"
						}, ]
					},
				},
				tabList: [{
					title: '水印设置'
				}, {
					title: '添加水印'
				}, {
					title: '预览水印'
				}],
				tabIndex: 0,
			}
		},
		onLoad(option) {
			if (option.id) {
				this.form.id = option.id
			} else {
                this.$modal.loading();
			}
			// 合同类型
			this.getContractType()
			this.initData()
		},
		methods: {
			save(){
				// 当前公司只有一个isSystem=1 的数据 其他都是为0 修改的是1 如果获取的是公共水印 则进行添加 其他都是修改 
				if (this.form.id == 1) {
				    this.form.id = null;
				    this.form.companyId=0;
				  addWaterMark(this.form).then(response => {
				    this.$modal.msgSuccess("保存成功");
				    this.form.id = response.data;
				    this.form.companyId = this.$store.getters.companyId;
				  });
				} else if (this.form.id > 1) {
				  updateWaterMark(this.form).then(response => {
				    this.$modal.msgSuccess("修改成功");
				  });
				}   
				uni.navigateBack(1)
				uni.$emit('refresh','')
			},
			initData() {
                this.$modal.loading();
				if (!this.form.id) {
                    this.$modal.loading();
				    return;
				}
				getWaterMark(this.form.id).then(response => {
					uni.hideLoading()
					this.form = response.data
					// 状态是否禁用
					if(this.form.isSystem == 1){
						this.setArr[1].disabled = true
					}
				})
			},
			/** 合同类型 */
			getContractType() {
				// 根据当前登录公司 查询合同类型
				listByCompanyId().then(response => {
					var list = []
					for (var i = 0; i < response.data.length; i++) {
						var object = {};
						object.text = response.data[i].name; // 展示text
						object.value = response.data[i].id; // 用id查询
						list.push(object);
					}
					this.contractArr = list
					this.form.contractTypeId = this.contractArr[0].value;
				})
			},
			/** 接受子组件传过来的值点击切换导航 */
			tabtap(index) {
				var _this = this
				_this.tabIndex = index;
			},
		}
	}
</script>

<style lang="scss" scoped>	
	::v-deep .uni-data-checklist .checklist-group .checklist-box {
		margin: 20rpx 20rpx 0;
	}

	.paddingAll {
		padding: 0 30rpx 0 10rpx;
	}

	.swiper-header ::v-deep .uni-scroll-view-content {
		display: flex;
		justify-content: space-between;
		width: 92%;
		margin: 0 auto;
	}

	::v-deep .uni-forms-item {
		margin-bottom: 36rpx;
	}

	.paddingAll {
		padding: 0 30rpx 0 10rpx;
	}

	page {
		background: $uni-bg-color;
	}

	.header {
		background: #bde8bf;
		height: 70rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;

		span {
			width: 80%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	.change_btn {
		background: #fff;
		margin-right: 0;
		height: 50rpx;
		line-height: 50rpx;
	}
</style>
